第三天--介紹link和絕對路徑與相對路徑

2023 iThome 鐵人賽

DAY 3

自我挑戰組

基礎前端+後端網站分享之留言板製作系列第 3 篇

15th鐵人賽

aliecele

2023-09-17 10:52:45

530 瀏覽

分享至

今天要介紹link和絕對路徑與相對路徑。

先上程式碼。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello world!</title>
</head>

<body>
    <h1>這是h1</h1>
    <h2>這是h2</h2>
    <h3>這是h3</h3>
    <p>這是p</p>
    <a href="https://www.google.com.tw/?hl=zh_TW">連結到Google網站</a>
    <img src="Google_Chrome_icon2.png" alt="Google圖">
    <img src="Google_Chrome_icon.png" alt="Google圖" width="100" height="100">
</body>

</html>

link能連結外部资源，是能把程式碼分類檔案，整理程式碼的整潔的存在，這跟後面介紹的css和JavaScript有關，能把html、css和JavaScript不用都寫在一個檔案，並讓這連接再一起運作的語法。
解釋上面圖的例子，這裡拿html連結css。

再來解釋絕對路徑和相對路徑，關係就像用地址、地標說明你家地方的差別，用上圖說明， href="/photo/example.css"意思能用這兩種方法說明，
絕對:xampp\htdocs\30days\Hello_World\photo\example.css
相對:Hello3.html所在資料夾的photo裡的example.css

檔案位置:

今天程式這裡用的是相對路徑。